<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tween</title>
</head>
<body>
<div>
  <input id="idRun" type="button" value="Run" onclick="Move.go();" />
</div>
<div id="idMove" style="width:100px; height:0px; background:#930;"></div>
<script>
var Move = {
	x : 0,
	t : null,
	go : function () {
		var a = (Move.x%4<2)?'bounce':'elastic';
		var z = (Move.x%2==0)?'open':'close';
		var oM = document.getElementById("idMove").style, t=0, c=500, d=80, b=0;
		clearTimeout(Move._t);
		function _run(){
			if(t<d){
				t++;
				oM.height= Math.ceil(Animate[a][z](t,b,c,d)) + "px";
				Move._t = setTimeout(_run, 10);
			}else{
				oM.left = c + "px";
				clearTimeout(Move._t);
			}
		}
		_run();
		Move.x = Move.x + 1;
	}
}
var Animate = {
	bounce : {
		open : function (t,b,c,d){
			if ((t/=d) < (1/2.75)) {
				return c*(7.5625*t*t) + b;
			} else if (t < (2/2.75)) {
				return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
			} else if (t < (2.5/2.75)) {
				return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
			} else {
				return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
			}
		},
		close : function (t,b,c,d){
			return c - Animate.bounce.open(t, b, c, d) + b;
		}
	},
	back : {
		open : function(t,b,c,d,s){
			if (s == undefined) s = 1.70158; 
			if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
			return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
			//return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		},
		close : function (t,b,c,d,s){
			return c- Animate.back.open(t,b,c,d,s);
		}
	},
	elastic : {
		open : function (t,b,c,d,a,p) {
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);			
		},
		close : function (t,b,c,d,a,p) {
			return c- Animate.elastic.open(t,b,c,d,a,p);
		}
	}
}
</script>
</body>
</html>

